<template>
	<view class="container">
		<uniNavBar name="作品展示" nextFlag="true" rightText="flase" bac="black"></uniNavBar>
		<!-- <view class="top-tar">
			
			<view class="items"  :class="index ==0?'active':''" @click="tap(0)">
				一年级
			</view>
			<view class="items"  :class="index ==1?'active':''" @click="tap(1)">
				二年级
			</view>
			<view class="items"  :class="index ==2?'active':''" @click="tap(2)">
				三年级
			</view>
			<view class="items"  :class="index ==3?'active':''" @click="tap(3)">
				小记者
			</view>
		</view> -->
		<view class="top-content" >
			<view class="uli">
				<view class="null" v-if="!list.length">
					<text>还没作品展示，快去上传...</text>
				</view>
				<view class="list" @click="details(items)" v-for="(items,index) in list" :key="index">
					<image :src="items.images[0]" v-if="type==1" class="banner" mode="scaleToFill"></image>
					<view class="videoBox" v-if="type==3">
						<image :src="items.images[0]"  class="banner" mode="scaleToFill"></image>
						
						<view class="modBox">
							<image src="../../static/play.png" class="mod" mode=""></image>
						</view>
					</view>
					<view class="list-content">
						<view class="name">
							{{items.title}}
						</view>
						<view class="list-flex">
							<view>
								<image src="../../static/look.png"></image>
								<text>{{items.browse}}</text>
							</view>
							<view>
								<image src="../../static/commonted.png"></image>
								<text>{{items.comments_count}}</text>
							</view>
							<view @click.stop="tickets(items.id)">
								<image src="../../static/floewsA.png"></image>
								<text>{{items.ticket}}</text>
							</view>
						</view>
					</view>
				</view>
			
			</view>
		</view>
		
	</view>
</template>

<script>
	import {activityList,post} from '@/utils/interface.js'
	export default {
		data(){
			return {
				index:0,
				id:"",
				list:[],
				type:""
			}
		},
		onLoad(e){
			this.id = e.id
			this.type = e.upload_type
			console.log(e)
		},
		onShow(){
			this.getList()
		},
		methods:{
			getList(){
				post({method:"activities.task_upload_list",task_id:this.id,token:uni.getStorageSync('userToken')}).then(res=>{
					console.log(res.data);
					this.list = res.data.list;
				})
			},
			tap(keys){
				this.index = keys
		    },
			details(id){
				uni.navigateTo({
					url:"/pages/me/display-details?info="+JSON.stringify(id)+'&id='+this.id+'&type='+this.type
				})
			},
			tickets(id){
				post({method:"activities.ticket",upload_id:id,token:uni.getStorageSync('userToken')}).then(res=>{
					console.log(res.data);
					if(res.status == false){
						uni.showToast({
							title:res.msg,
							icon:"none"
							
						})
						return false
					}
					uni.showToast({
						title:"投票成功"
					})
					this.getList()
				})
			}
		}
	};
</script>

<style>
	.videoBox{
		position: relative;
	}
	.modBox{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,.4);
	}
	.mod{
		width: 60upx;
		height: 60upx;
		display: block;
	}
	.null{
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999;
		font-size: 30upx;
		height: 400upx;
		margin-top: 200upx;
		width: 100%;
	}
	.container{
		padding-top: 88upx;
	}
	.top-tar{
		display: flex;
		align-items: center;
		
		height:88upx;
		padding: 0 30upx;
	}
	.top-tar .items{
		flex: 1;
		color: #999999;
		font-size: 28upx;
		height: 50upx;
		text-align: center;
	}
	.top-tar .active{
		position: relative;
	}
	.top-tar .active:after{
		position: absolute;
		bottom: 0;
		height: 2upx;
		background: #A975C7;
		left: 50upx;
		right:50upx;
		content: "";
		
	}
	.top-content{
		padding: 0 30upx;
	}
	.banner{
		width: 333upx;
		height: 316upx;
		background: #f3f3f3;
		opacity:0.72;
		border-radius:10upx 10upx 0px 0px;
		display: block;
		object-fit: cover;
	}
	.uli{
		display: flex;
		-webkit-flex-direction: row;
		    flex-direction: row;
		    -webkit-flex-wrap: wrap;
		    flex-wrap: wrap;
			justify-content: space-between;
	}
	.list{
		width: 333upx;
		background:rgba(255,255,255,1);
		box-shadow:0px 4upx 8upx 0px rgba(201,201,201,0.75);
		border-radius:10upx;
		overflow: hidden;
		margin-bottom: 20upx;
		height: 429upx;
	}
	.name{
		margin-top: 10upx;
		margin-bottom: 12upx;
		color: #333333;
		font-size: 24upx;
		display: block;
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	.list-flex{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 24upx;
		
	}
	.list-flex image{
		width: 30upx;
		height: 30upx;
		margin-right: 10upx;
		
	}
	.list-flex view{
		margin-right: 20upx;
		display: flex;
		align-items: center;
	}
	.list-content{
		padding: 0 18upx;
	}
</style>
